<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>svg仪表盘样式</title>
    <style>
        *{
        margin: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .wrapper{
        width: 500px;
        height: 500px;
        /* border: 1px solid #000; */
    }
   .yibiaopan{
       width: 100%;
       text-align: center;
   }
   svg{
       width: 500px;
       height: 300px;
       margin-top: 40px;
       /* border: 1px solid #000; */
       display: flex;
       justify-items: center;
       align-items: center;
       box-shadow: 0 0 3px 4px #ddd;
   }
   #inp{
       margin-top: 10px;
       height: 25px;
       outline:none;
       padding-left: 10px;
       /* box-sizing: border-box; */
       border-radius: 10px;
   }
   path{
       fill:transparent;
       stroke: #ddd;
       stroke-width: 10px;
   }
 #demo{
     stroke: aqua;
     transition: stroke-dashoffset 2s;
 }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="yibiaopan">
            <h3>仪表盘样式</h3>
            <input type="text" id="inp">
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" class="si-glyph-view">
            <path d="M 200 220 A 120 100 0 1 1 300 220"></path>
            <path d="M 200 220 A 120 100 0 1 1 300 220" id="demo"></path>
        </svg>
    </div>
    <script>
        demo.style.strokeDasharray = demo.getTotalLength();
        demo.style.strokeDashoffset = demo.getTotalLength();
        inp.onblur = function () {
            console.log(this.value);
            if (Number(this.value)) {
                demo.style.strokeDashoffset = (100 - Number(this.value)) * demo.getTotalLength() / 100;
            }
        };
    </script>
</body>

</html>